<template>
  <div>
    <el-dialog :title="title" :visible.sync="visible" width="800px" append-to-body custom-class="import-dialog">
      <div class="mb20">
        <el-button @click="handleAdd">添加设施</el-button>
      </div>
      <el-table :data="form.contractFacilitiesItemList" style="width: 100%">
        <el-table-column label="设施名称" width="200">
          <template #header>
            <div><span style="color: red">*</span><span>设施名称</span></div>
          </template>
          <template slot-scope="scope">
            <el-select v-model="scope.row.facilitiesId" placeholder="请选择"
                       @change="scope.row.facilitiesName = facilitiesList.find(item => item.id === scope.row.facilitiesId).name"
            >
              <el-option v-for="item in facilitiesList" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="数量" width="200">
          <template #header>
            <div><span style="color: red">*</span><span>数量</span></div>
          </template>
          <template slot-scope="scope">
            <el-input v-model="scope.row.facilitiesNumber" placeholder="请输入数量"
                      @change="scope.row.facilitiesNumber = Number(scope.row.facilitiesNumber) || null"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="单价" width="200">
          <template #header>
            <div><span style="color: red">*</span><span>单价（元）</span></div>
          </template>
          <template slot-scope="scope">
            <el-input v-model="scope.row.facilitiesPrice" placeholder="请输入单价"
                      @change="scope.row.facilitiesPrice = Number(scope.row.facilitiesPrice) || 0"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="danger" size="mini" @click="form.contractFacilitiesItemList.splice(scope.$index, 1)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">保 存</el-button>
        <el-button @click="close">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { debounce } from '@/utils'
import { listApartmentFacilities } from '@/api/contract/lessee'

export default {
  name: 'add-housing-facilities',
  props: {
    title: {
      type: String,
      default: '添加房屋设施'
    },
    value: {
      type: Boolean,
      default: false
    },
    data: {
      // type: Array,
      default: []
    }
  },
  data() {
    return {
      form: {
        contractFacilitiesItemList: []
      },
      //房屋设施列表
      facilitiesList: []
    }
  },
  computed: {
    visible: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)   // 此处监测visible目的为关闭弹窗时，重新更换value值，注意emit的事件一定要为input。
      }
    }
  },
  watch: {
    value: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.init()
        }
      },
      immediate: true
    }
  },
  methods: {
    init() {
      this.form.contractFacilitiesItemList = [...this.data]
      let params={
        facilitiesType: 2 // 设施类型（1服务，2设施，3建筑，4卫浴，5餐厨，6娱乐）该页面写死传2
      }
      listApartmentFacilities(params).then(res => {
        this.facilitiesList = res.data.map(item => {
            return {
              id: item.facilitiesId,
              name: item.facilitiesName
            }
          }
        )
      })
    },
    handleAdd() {
      this.form.contractFacilitiesItemList.push({
        facilitiesId: null, //房屋设施id
        facilitiesName: '', //房屋设施名
        facilitiesPrice: null, //设施价格
        facilitiesNumber: null //设施数量
      })
    },
    submit: debounce(function() {
      for (let i = 0; i < this.form.contractFacilitiesItemList.length; i++) {
        if (!this.form.contractFacilitiesItemList[i].facilitiesId) {
          this.$message.error('请选择设施名称')
          return false
        }
        if (this.form.contractFacilitiesItemList[i].facilitiesNumber === null) {
          this.$message.error('请填写数量')
          return false
        }
        if (this.form.contractFacilitiesItemList[i].facilitiesPrice === null) {
          this.$message.error('请填写单价')
          return false
        }
      }
      this.$emit('update:data', this.form.contractFacilitiesItemList)
      this.close()
    }, 500, true),
    close() {
      console.log('close')
      this.visible = false
    }
  }
}
</script>


<style scoped lang="scss">

</style>
